
<template>
    <div>
        <el-form :inline="true" class="demo-form-inline" v-model="searchForm">
            <el-form-item>
                <el-input
                        v-model="searchForm.Name"
                        placeholder="活动名称"
                        clearable
                ></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="searchActivity" icon="el-icon-search"
                >查找</el-button
                >
            </el-form-item>
            <el-form-item>

            </el-form-item>
            <el-form-item>
            <el-button type="info" @click="addBtn">添加活动</el-button>
            </el-form-item>
            <el-form-item>
                <el-popconfirm title="确定批量删除这些吗？" @confirm="deleteRoles">
                    <el-button
                            type="danger"
                            slot="reference"
                            icon="el-icon-delete-solid"
                            :disabled="delButSta"
                    >批量删除</el-button
                    >
                </el-popconfirm>
            </el-form-item>
        </el-form>
        <el-table
                ref="multipleTable"
                :data="tableData"
                tooltip-effect="dark"
                border
                stripe
                style="width: 100%"
                @selection-change="handleSelectionChange"
        >
            <el-table-column type="selection" width="55"> </el-table-column>
            <el-table-column prop="name" label="发布标题" width="200"> </el-table-column>
            <el-table-column prop="startdate" label="开始日期" width="150"></el-table-column>
            <el-table-column prop="enddate" label="结束日期" width="150"></el-table-column>
            <el-table-column prop="issuer" label="发布人" width="150"></el-table-column>
            <el-table-column prop="description" label="内容" width="300">
            </el-table-column>

            <!-- <el-table-column prop="statu" width="160" label="状态">
              <template slot-scope="scope">
                <el-tag v-if="scope.row.statu === '1'" type="success">正常</el-tag>
                <el-tag v-if="scope.row.statu === '0'" type="danger">禁用</el-tag>
              </template>
            </el-table-column> -->
            <el-table-column label="操作" width="339">
                <template slot-scope="scope">
                    <el-button size="mini" @click="editActivity(scope.row.id)"
                    >编辑</el-button
                    >

                    <el-popconfirm
                            title="这是一段内容确定删除吗？"
                            @confirm="deleteById(scope.row.id)"
                    >
                        <el-button slot="reference" type="danger" size="small"
                        >删除</el-button
                        >
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="page.CurrentPage"
                :page-sizes="[10, 20, 50, 100]"
                :page-size="page.Size"
                layout="total, sizes, prev, pager, next, jumper"
                :total="page.Total"
        >
        </el-pagination>

        <el-dialog
                title="活动通知"
                :visible.sync="centerDialogVisible"
                width="45%"
                center>
           <template>
               <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                   <el-form-item label="活动名称" prop="name">
                       <el-input v-model="ruleForm.name"></el-input>
                   </el-form-item>
                   <el-form-item label="活动区域" prop="place">
                       <el-select v-model="ruleForm.place" placeholder="请选择活动区域">
                           <el-option label="操场" value="操场"></el-option>
                           <el-option label="宿舍" value="宿舍"></el-option>
                           <el-option label="校外" value="校外"></el-option>
                           <el-option label="食堂" value="食堂"></el-option>
                           <el-option label="图书馆" value="图书馆"></el-option>
                           <el-option label="篮球场" value="篮球场"></el-option>
                           <el-option label="足球场" value="足球场"></el-option>
                           <el-option label="羽毛球场" value="羽毛球场"></el-option>
                           <el-option label="一级平台" value="一级平台"></el-option>
                           <el-option label="二级平台" value="二级平台"></el-option>
                           <el-option label="三级平台" value="三级平台"></el-option>
                           <el-option label="十二号楼空地" value="十二号楼空地"></el-option>
                           <el-option label="---其他场地---" value="其他"></el-option>
                       </el-select>
                   </el-form-item>
                   <el-form-item label="活动时间" required>
                       <!--<el-col :span="11">
                           <el-form-item prop="startdate">
                               <el-date-picker type="text" placeholder="选择日期" v-model="ruleForm.startdate" style="width: 100%;"></el-date-picker>
                           </el-form-item>
                       </el-col>

                       <el-col class="line" :span="1">——</el-col>
                       <el-col :span="11">
                           <el-form-item prop="enddate">
                               <el-date-picker type="text" placeholder="选择日期" v-model="ruleForm.enddate" style="width: 100%;"></el-date-picker>
                           </el-form-item>
                       </el-col>-->

                       <div class="block">
                           <el-date-picker
                                   v-model="value2"
                                   type="daterange"
                                   align="right"
                                   unlink-panels
                                   range-separator="至"
                                   start-placeholder="开始日期"
                                   end-placeholder="结束日期"
                                   :picker-options="pickerOptions">
                           </el-date-picker>
                       </div>
                   </el-form-item>
                   <el-form-item label="发布人" prop="issuer">
                       <el-input v-model="ruleForm.issuer"></el-input>
                   </el-form-item>
             <!--      <el-form-item label="活动性质" prop="type">
                       <el-checkbox-group v-model="ruleForm.type">
                           <el-checkbox label="美食/餐厅活动" name="type"></el-checkbox>
                           <el-checkbox label="校志愿者活动" name="type"></el-checkbox>
                           <el-checkbox label="校组织活动" name="type"></el-checkbox>
                           <el-checkbox label="院组织活动" name="type"></el-checkbox>
                           <el-checkbox label="娱乐活动" name="type"></el-checkbox>
                       </el-checkbox-group>
                   </el-form-item>-->
                   <el-form-item label="活动形式" prop="modality">
                       <el-radio-group v-model="ruleForm.modality">
                           <el-radio label="线上活动"></el-radio>
                           <el-radio label="线下活动"></el-radio>
                       </el-radio-group>
                   </el-form-item>
                   <el-form-item label="活动介绍" prop="description">
                       <el-input type="textarea" v-model="ruleForm.description"></el-input>
                   </el-form-item>
                   <el-form-item>
                       <el-button type="primary" @click="addAdvice('ruleForm')">立即创建</el-button>
                       <el-button @click="resetForm('ruleForm')">重置</el-button>
                       <el-button @click="quxiao('ruleForm')">取消</el-button>
                   </el-form-item>

               </el-form>
           </template>
            <span slot="footer" class="dialog-footer">

  </span>
        </el-dialog>



<!--        <el-dialog-->
<!--                title="编辑"-->
<!--                :visible.sync="centerDialogVisible"-->
<!--                width="30%"-->
<!--                :before-close="closeDialog"-->
<!--        >-->
<!--            &lt;!&ndash;<el-form&ndash;&gt;
&lt;!&ndash;                    :model="addForm"&ndash;&gt;
&lt;!&ndash;                    :rules="rules"&ndash;&gt;
&lt;!&ndash;                    ref="addForm"&ndash;&gt;
&lt;!&ndash;                    label-width="100px"&ndash;&gt;
&lt;!&ndash;                    class="demo-ruleForm"&ndash;&gt;
&lt;!&ndash;            >&ndash;&gt;
&lt;!&ndash;                <el-form-item label="姓名" prop="name">&ndash;&gt;
&lt;!&ndash;                    <el-input v-model="addForm.name"></el-input>&ndash;&gt;
&lt;!&ndash;                </el-form-item>&ndash;&gt;
&lt;!&ndash;                &lt;!&ndash; <el-form-item label="学号" prop="id"  >&ndash;&gt;
&lt;!&ndash;                  <el-input v-model="addForm.id" :disabled="editId"></el-input>&ndash;&gt;
&lt;!&ndash;                </el-form-item> &ndash;&gt;&ndash;&gt;
&lt;!&ndash;                <el-form-item label="性别" prop="sex">&ndash;&gt;
&lt;!&ndash;                    <el-input v-model="addForm.sex"></el-input>&ndash;&gt;
&lt;!&ndash;                </el-form-item>&ndash;&gt;
&lt;!&ndash;                <el-form-item label="学院" prop="college">&ndash;&gt;
&lt;!&ndash;                    <el-input v-model="addForm.college"></el-input>&ndash;&gt;
&lt;!&ndash;                </el-form-item>&ndash;&gt;
&lt;!&ndash;                <el-form-item label="班级" prop="grade">&ndash;&gt;
&lt;!&ndash;                    <el-input v-model="addForm.grade"></el-input>&ndash;&gt;
&lt;!&ndash;                </el-form-item>&ndash;&gt;
&lt;!&ndash;                <el-form-item label="手机号" prop="phone">&ndash;&gt;
&lt;!&ndash;                    <el-input v-model="addForm.phone"></el-input>&ndash;&gt;
&lt;!&ndash;                </el-form-item>&ndash;&gt;
&lt;!&ndash;                <el-form-item>&ndash;&gt;
&lt;!&ndash;                    <el-button&ndash;&gt;
&lt;!&ndash;                            type="primary"&ndash;&gt;
&lt;!&ndash;                            size="small"&ndash;&gt;
&lt;!&ndash;                            @click="submitForm('addForm')"&ndash;&gt;
&lt;!&ndash;                            :loading="loading"&ndash;&gt;
&lt;!&ndash;                    >立即创建</el-button&ndash;&gt;
&lt;!&ndash;                    >&ndash;&gt;
&lt;!&ndash;                    <el-button @click="resetForm('addForm')" size="small">重置</el-button>&ndash;&gt;
&lt;!&ndash;                    <el-button @click="addDialogVisible = false" size="small"&ndash;&gt;
&lt;!&ndash;                    >取 消</el-button&ndash;&gt;
&lt;!&ndash;                    >&ndash;&gt;
&lt;!&ndash;                </el-form-item>&ndash;&gt;
&lt;!&ndash;            </el-form>&ndash;&gt;-->
<!--        </el-dialog>-->

    </div>
</template>

<script>
    import { request } from "@/axios/request"
    import qs from 'qs'
    export default {
        name: "Student",
        data() {
            return {
                pickerOptions: {
                    shortcuts: [{
                        text: '最近一周',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近一个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近三个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                            picker.$emit('pick', [start, end]);
                        }
                    }]
                },
                value1: '',
                value2: '',

                centerDialogVisible: false,
                updateFlag:false,
                ruleForm: {
                    name: '',
                    place: '',//活动区域

                    startdate: '',//开始时间
                    enddate: '',//结束时间
                    modality: '',//活动形式
                    issuer:'',  //发布人
                    description: '',//活动简介
                    status: 'Y'
                },
                rules: {
                    name: [
                        { required: true, message: '请输入活动名称', trigger: 'blur' },
                        { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
                    ],
                    issuer: [
                        { required: true, message: '请输入发布人', trigger: 'blur' },
                    ],
                    startdate: [
                        {  required: true, message: '请选择开始日期', trigger: 'change' }
                    ],
                    enddate: [
                        {  required: true, message: '请选择结束时间', trigger: 'change' }
                    ],

                    modality: [
                        { required: true, message: '请选择活动形式', trigger: 'change' }
                    ],
                    description: [
                        { required: true, message: '请填写活动简介', trigger: 'blur' }
                    ]
                },

                applyDisabled:true,
                applyDate:["2022-04-01 19:00:00", "2022-12-01 20:00:00"],
                applyForm:{
                    id:null,
                    startDate:null,
                    endDate:null,
                    destination:null,
                    reason:null,
                    remark:null,
                    country:null,
                    province:null,
                    city:null,
                    district:null
                },
                applyDialog:false,
                data: [],
                loading:false,
                TreeData:{},
                currentRoleId:null,
                editId:false,
                addDialogVisible: false,
                disDialogVisible:false,
                searchForm: {
                    Name: "",
                },
                addForm: {
                    name: '',
                    id:'',
                    sex: '',
                    college:'',
                    phone: '',
                },
                page: {
                    Size: 10,
                    CurrentPage: 1,
                    Total: null
                },
                selectIds:[],
                delButSta: true,
                tableData: [],
                defaultProps: {
                    children: 'children',
                    label: 'name'
                },
            };
        },
        created() {
            this.getActivity();
        },
        methods: {
            test(){
                alert(2)
            },
            addBtn(){
                this.centerDialogVisible = true;

                this.$refs['ruleForm'].resetFields();
                console.log(this.ruleForm)
                this.ruleForm.id = null;
            },
           // 根据id回写学生信息
            editActivity(id) {
                this.updateFlag=true
                request({
                    url: "/advice/activity/" + id,
                    method: "get",
                }).then((res) => {
                    this.$nextTick(() => { // 注意看这里
                        this.ruleForm = res.data.object;
                        this.centerDialogVisible = true;
                    })

                });
            },







            searchActivity(){
              this.getActivity();
            },

            deleteById(id){


                request({
                    url: "/advice/activity/"+id,
                    method: "delete",
                }).then((res) => {
                    this.$message({
                        message:res.data.msg,
                        type:'success'
                    })
                    this.getActivity();
                }).catch(error=>{
                    this.$message({
                        message:error.response.data.msg,
                        type: 'error'
                    })
                });
            },

            getActivity(){
                request({
                    url: "/advice/activity",
                    params:{
                        Name:this.searchForm.Name,
                        CurrentPage:this.page.CurrentPage,
                        Size:this.page.Size
                    },
                    method: "get",
                }).then((res) => {
                    this.tableData = res.data.object.records;
                    this.page.Total=res.data.object.total;

                }).catch(error=>{
                    this.$message({
                        message:error.response.data.msg,
                        type: 'error'
                    })
                });
            },

            //提交活动通知
            addAdvice(ruleForm){
                this.$refs[ruleForm].validate((valid) => {
                    if (valid){
                        console.log(this.ruleForm)
                        request({
                            url: "/advice/activity",
                            data: this.ruleForm,
                            method: "post",
                        }).then((res) => {

                            this.$message({
                                message:res.data.msg,
                                type:'success'
                            })
                            this.quxiao(ruleForm);
                            this.getActivity();
                        }).catch(error=>{
                            this.$message({
                                message:error.response.data.msg,
                                type: 'error'
                            })
                        });
                    }else {
                        alert("提交失败，重新输入！")
                    }

                })


            },










            //取消操作
            quxiao(ruleForm){
                this.centerDialogVisible = false;
                this.resetForm(ruleForm)
            },


            //获取所有已经选择的id
            handleSelectionChange(val){
                this.selectIds=[]
                if(val.length!==0){
                    val.forEach(element => {
                        this.selectIds.push(element.id)
                    })
                    this.delButSta=false
                }else{
                    this.delButSta=true
                }
            },
            //获取所有数据
            gettableData() {

                request({
                    url: "/student",
                    method: "get",
                    params:{
                        Name:this.searchForm.Name,
                        CurrentPage:this.page.CurrentPage,
                        Size:this.page.Size
                    }
                }).then(res => {

                    this.tableData = res.data.object.data
                    this.page.Total=res.data.object.TotalCount;

                });

            },
            //请假
            apply(id){
                this.applyDialog=true
                this.applyForm.id=id
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            closeDialog(done) {
                this.resetForm('addForm')
                this.loading=false
                done()
            },
            closeApplyDialog(done){
                this.resetForm('applyForm')
                this.loading=false
                done()
            },
            handleSizeChange(val) {
                this.page.Size=val
                this.getActivity()
            },
            handleCurrentChange(val) {
                this.page.CurrentPage=val
                this.getActivity()
            },
            //批量删除数据
            deleteRoles(){
                request({
                    url:'/student',
                    method:'delete',
                    params:{
                        ids:this.selectIds
                    },
                    paramsSerializer: params => {
                        return qs.stringify(params, { indices: false })
                    }
                }).then(res=>{
                    this.delButSta=false
                    this.gettableData()
                    this.$message({
                        message:res.data.msg,
                        type:'success'
                    })
                })
            },

            //查找符合学生的角色

            //修改学生信息


            // //分配按钮点击事件
            // disAuth(id){
            //   this.currentRoleId=id
            //   this.disDialogVisible=true
            //   request({
            //     url:'/role/menu/'+id,
            //     method:'get'
            //   }).then(res=>{
            //     this.$refs.AuthTree.setCheckedKeys(res.data.object)
            //   })
            // },
            //删除数据
            handleDelete(id) {
                this.selectIds=[]
                this.selectIds.push(id)
                this.deleteRoles()
            },

        }}
</script>

<style scoped>
    .el-pagination {
        float: right;
    }
    .el-form {
        padding-right: 40px;
    }
    .el-button{
        margin-right: 7px;
        margin-left: 10px;
    }
</style>
